<template>

  <div id="body-pd">

<!--    //顶部header-->
    <el-header class="header" id="header">
<!--      //伸缩按钮-->
      <div class="header__toggle">
        <i class='bx bx-menu' id="header-toggle"></i>
      </div>
<!--      //头像-->
      <div class="header__img">
        <img src="../assets/images/touxiang.jpeg" alt="">
      </div>
    </el-header>

<!--    //左侧导航栏-->
    <div class="l-navbar" id="nav-bar">
      <nav class="nav">
<!--        //logo标题-->
        <div>
          <a href="#" class="nav__logo">
            <i class='bx bx-layer nav__logo-icon'></i>
            <span class="nav__logo-name">菜购</span>
          </a>
<!--          //导航菜单-->
          <div class="nav__list">
            <el-menu router
                     default-active="2"
                     class="el-menu-vertical-demo"
                     background-color="#409EFF"
                     text-color="#fff"
                     active-text-color="#ffd04b"
                     style="border-right: 0px">
              <el-submenu v-for="m in menuList" :index="m.id" :key="m.id">
                <template slot="title">
                  <i class='el-icon-eleme' style="margin-right:20px"></i>
                  <span class="nav__name">{{ m.name }}</span>
                </template>
                <el-menu-item-group style="margin-left: 30px">
                  <el-menu-item v-for="c in m.childrenmenu" :index="c.link" :key="c.childId">{{ c.name }}</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
            </el-menu>
            <!--            <a href="#" class="nav__link">-->
            <!--              <i class='bx bx-bar-chart-alt-2 nav__icon' ></i>-->
            <!--              <span class="nav__name">Analytics</span>-->
            <!--            </a>-->
          </div>
        </div>
<!--        //左侧底部用户退出按钮-->
        <a href="#" class="nav__link">
          <i class='bx bx-log-out nav__icon'></i>
          <span class="nav__name">Log Out</span>
        </a>
      </nav>
    </div>
    <el-main>
      <router-view/>
    </el-main>
  </div>
</template>
<script>

export default {
  mounted() {
    require("../js/home")
  },
  data() {
    return {
      menuList: [
        {
          id: '1', icon: '', name: '系统管理', childrenmenu: [
            {link: '/arealist', name: '区域列表'},
            {link: '/goodCart', name: '购物车'},
            {link: '/goodOrder', name: '我的订单'},
          ]
        }
      ]
    }
  },
  methods: {},
  created() {
    // this.$router.push("/goodList")
  }
}
</script>
<style scoped>
@import "../css/styles.css";
@import "https://cdn.jsdelivr.net/npm/boxicons@2.0.5/css/boxicons.min.css";
</style>